<template>
  <div>
    <h3>商品列表</h3>
    <ul>
        <li v-for="goods in goodsList" :key="goods.id" :style="{boder:'1px solid red'}">
            <p>商品名称:{{goods.gname}}</p>
            <p>商品价格: {{goods.price}}</p>
            <p><button @click="addCar(goods)">加入购物车</button></p>
        </li>
    </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'GoodsList',
    computed:{
        ...mapState('goods', ['goodsList'])
    },
    methods:{
        addCar(goods){
            this.$store.dispatch('car/addCar', goods)
        }
    }
}
</script>

<style>

</style>